<template>
  <div v-loading="loading" class="dashboard-container">
    <el-card class="app-container">
      <TreeTools :node-info="company" is-root @click-add="showAddDialog" />
      <!-- 分割线 -->
      <el-divider />
      <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false" icon-class="el-icon-circle-plus" :indent="20" @refresh="loadData">
        <template v-slot="{ data }">
          <TreeTools :node-info="data" @refresh="loadData" @click-add="showAddDialog" @click-edit="showEdit" />
        </template>
      </el-tree>
      <AddDept ref="addDept" :show-dialog.sync="showDialog" :pid="currentId" @reload="loadData" />
    </el-card>
  </div>
</template>

<script>
import TreeTools from './components/TreeTool.vue'
import AddDept from './components/AddDept.vue'
import { getDepts } from '@/api/departments'
import { arrayToTree } from '@/utils'

export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {
        name: 'NERV',
        manager: '负责人',
        id: ''
      },
      data: [],
      loading: true,
      showDialog: false,
      currentId: ''
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getDepts()
      const list = arrayToTree(res.data.depts, '')
      this.data = list
      this.loading = false
    },
    // tree组件绑定方法
    showAddDialog(id) {
      this.showDialog = true
      this.currentId = id
    },
    async showEdit(id) {
      await this.$refs.addDept.getDetail(id)
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .app-container {
    margin: 20px;
    padding: 140px 120px;
    ::v-deep .el-tree-node {
      margin: 10px 0;
    }
  }
}
</style>
